<template>
	<!-- 唯一需要做的就是把数据传递给 父组件 -->
	<view class="">
		<view
			style="margin-top: 30rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; align-items: center; justify-content: flex-start;flex-wrap: wrap;">
			<checkbox-group @change="changeAll">
				<label>
					<checkbox value="cb" :checked="props.allChecked" style="transform: scale(0.7)" />
					<text :style="{color: linkColor1, fontWeight: fontWeight1, fontSize: fontSize1}">已阅读并同意</text>
				</label>
			</checkbox-group>
			<!-- 做活 怎么操作 -->
			<text v-for="item in radioItem" :key="item.id" :style="{color:linkColor2, fontWeight: fontWeight2, fontSize: fontSize2}"
				@click="privatePro(item.key)">{{item.label}}</text>
		
		</view>

		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	const popupPro = ref();
	const agreeType = ref(1);


	const props = defineProps({
		radioItem: {
			type: Array,
			default: () => [{
				id: 2,
				label: "《 隐私条款 》",
				key: 1
			}]
		},
		allChecked: {
			type: Boolean,
			default: false
		},
		activeType: {
			type: Number,
			default: 1
		},

		linkColor1: {
			type: String,
			default: '#1A1A1A'
		},
		fontSize1: {
			type: String,
			default: '26rpx'
		},
		fontWeight1: {
			type: String,
			default: '400'
		},
		linkColor2: {
			type: String,
			default: '#0068B7'
		},
		fontSize2: {
			type: String,
			default: '26rpx'
		},
		fontWeight2: {
			type: String,
			default: '400'
		}
	})



	const privatePro = (type) => {
		agreeType.value = type;
		popupPro.value.open('center');
	}
	const emit = defineEmits(['updateAllChecked']);
	const ok1 = () => {
		emit('updateAllChecked', true);
		popupPro.value.close()
	}
	const changeAll = (val) => {
		console.log(val.detail, val.detail.value.length);
		console.log(val.detail, '----');
		if (val.detail.value.length > 0) {
			emit('updateAllChecked', true);
		} else {
			emit('updateAllChecked', false);
		}
	}
</script>

<style>

</style>